import React, {useEffect, useState} from "react";
import {
  Form,
  Input,
  Select,
  DatePicker,
  Button,
  Space,
  message,
  FormInstance,
} from "antd";

import _ from "lodash";
import './index.scss'
import Moment from "moment";
import {useForm} from "antd/lib/form/Form";
import EventTypeStore from "@/common/store/EventTypeStore";
import {observer} from "mobx-react";
import CameraInfoStore from "@/common/store/CameraInfoStore";
import {antDSelectFilterOption, disabledDate} from "@/common/util";
import FusionStore from "@/pages/radar/store/FusionStore";

const {RangePicker} = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;

const CarNumber = [
  {key: "false", name: "有"},
  {key: "true", name: "无"},
];

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  colon: false,
};

const pickerLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18},
  colon: false,
};

const Query = (props: any) => {
  const [form] = useForm();

  const onFormFinished = (values: any) => {

  }

  const onChange = (value: any) => {

  }

  const onValuesChange = (changedValues: any, values: any) => {

  }

  const renderButtonGroup = (form: FormInstance) => {
    const handleReset = () => {
      // eventsStore.resetQueryEvents({}).then(() => {
      //   form.resetFields();
      // });
    }
    return (
      <Space className="buttonGroup">
        <Button key="resetButton" onClick={handleReset}>
          重置
        </Button>
        <Button key="queryButton" type="primary" htmlType="submit">
          检索
        </Button>
      </Space>
    )
  }

  const renderSearchItems = () => {
    return (
      <>
        <FormItem {...formItemLayout} label={"算法模型"} name="eventTypeList">
          <Select
            mode="multiple"
            allowClear={true}
            showSearch={true}
            dropdownMatchSelectWidth={false}
            placeholder={"全部类型"}
            maxTagCount={1}
          >
            {EventTypeStore.eventTypes?.map((item) => {
              return (
                <Option key={item.eventType} value={item.eventType}>
                  {item.eventTypeName}
                </Option>
              );
            })}
          </Select>
        </FormItem>

        <FormItem {...formItemLayout} label={"摄像头"} name="cameraCodes">
          <Select
            mode="multiple"
            allowClear={true}
            showSearch={true}
            dropdownMatchSelectWidth={false}
            placeholder={"全部摄像头"}
            filterOption={antDSelectFilterOption}
            maxTagCount={1}
          >
            {CameraInfoStore.cameraInfos?.map((item) => {
              return (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              );
            })}
          </Select>
        </FormItem>

        <FormItem {...formItemLayout} label="融合组" name="groupDeviceIds">
          <Select
            mode="multiple"
            allowClear={true}
            showSearch={true}
            dropdownMatchSelectWidth={false}
            placeholder={"全部融合组"}
            filterOption={antDSelectFilterOption}
            maxTagCount={1}
          >
            {FusionStore.getCalibrateList?.map((item: any) => {
              return (
                <Option key={item?.id} value={item?.id}>
                  {item?.name}
                </Option>
              );
            })}
          </Select>
        </FormItem>

        <FormItem{...pickerLayout} label={"事件时间"} name="eventTimes" className="maxCtrl">
          <RangePicker
            style={{width: "100%"}}
            showTime={{
              format: "HH:mm",
              defaultValue: [Moment("00:00", "HH:mm"), Moment("23:59", "HH:mm")],
            }}
            format={"YYYY-MM-DD HH:mm"}
            placeholder={["开始时间", "结束时间"]}
            disabledDate={disabledDate}
          />
        </FormItem>

        <FormItem {...formItemLayout} label={"事件编号"} name="anaEventId">
          <Input
            // value={inputvalue}
            onChange={onChange}
            placeholder="请输入事件编号"
          />
        </FormItem>
        <FormItem {...formItemLayout} label={"任务编号"} name="taskId">
          <Input
            // value={inputvalue}
            maxLength={40}
            placeholder={"请输入任务编号"}
          />
        </FormItem>
      </>
    )
  }

  return (
    <Form
      form={form}
      className="filterForm"
      onFinish={onFormFinished}
      onValuesChange={onValuesChange}
      // initialValues={eventsStore.getRequestParams(true)}
    >
      <div>{renderSearchItems()}</div>
      <div>{renderButtonGroup(form)}</div>
    </Form>
  )
}

export default observer(Query)
